import React, {PureComponent} from "react";
import imgUrl from "../../../img/dark_heart.jpg"
import {connect} from "react-redux";
import {requestProjectData, updateTagStatus} from "../store/actionCreator";

class ProjectWrapper extends PureComponent {

    constructor(props) {
        super(props);
        this.handleScroll = this.handleScroll.bind(this);
    }

    render() {

        return (
                <ul style={ulStyle}>
                    {
                        this.props.projectList.map((item) => {

                            return (
                                <li style={liStyle} key={item.get("id")}>
                                    <img src={imgUrl} style={imgStyle} alt={"爱心"}/>
                                    <div style={middleStyle}>
                                        <div style={titleStyle}>{item.get("title")}</div>
                                        <div style={contentStyle}>{item.get("desc")}</div>
                                        <div>
                                            <span style={{...tipsDateAndAuthorStyle,...tipsDateStyle}}>{item.get("niceDate")}</span>
                                            <span style={tipsDateAndAuthorStyle}>{item.get("author")}</span>
                                            <span style={tipsRecommendStyle}>查看同类项目</span>
                                        </div>
                                    </div>
                                    <img style={rightStyle} src={item.get("envelopePic")} alt={"标题图片"}/>
                                </li>
                            );
                        })
                    }
                </ul>
        );
    }

    componentDidMount() {
        if (this.props.projectList.size === 0) {
            this.props.requestProjectList(this.props.projectIndex);
        }
        window.addEventListener("scroll", this.handleScroll)
    }

    componentWillUnmount() {
        window.removeEventListener("scroll", this.handleScroll)
    }

    handleScroll() {
        const clientHeight = document.documentElement.clientHeight;
        const scrollTop = document.documentElement.scrollTop;
        const scrollHeight = document.documentElement.scrollHeight;
        const number = Math.ceil(clientHeight + scrollTop);

        if (number === scrollHeight) {
            if (this.props.projectTag) {
                this.props.changeProjectTag(false);
                const index = this.props.projectIndex + 1;
                this.props.requestProjectList(index);
            }
        }

    }

}


const mapState = (state) => {
    return {
        projectList: state.getIn(["bodyReducer", "projectList"]),
        projectIndex: state.getIn(["bodyReducer", "projectIndex"]),
        projectTag: state.getIn(["bodyReducer", "projectTag"])

    }
};

const disPatchState = (dispatch) => {
    return {
        requestProjectList(index) {
            const action = requestProjectData(index);
            dispatch(action);
        },
        changeProjectTag(bool) {
            const action = updateTagStatus(bool);
            dispatch(action);
        }
    }
};

export default connect(mapState, disPatchState)(ProjectWrapper);

const ulStyle = {
    width: "100%"
};

const liStyle = {
    display: "block",
    boxSizing: "border-box",
    borderBottom: "solid 1px #e2e2e2",
    overflow: "hidden",
    padding: 20,
};

const imgStyle = {
    verticalAlign: "top",
    float: "left",
};

const middleStyle = {
    float: "left",
    marginLeft: 20,

};

const titleStyle = {
    width:548,
    fontSize: 18,
    color: "#2e3135",
    fontWeight: 600,
};

const contentStyle = {
    width: 548,
    color: "#545c63",
    fontSize: 16,
    marginTop: 16,
    lineHeight:1,
    marginBottom: 20

};

const tipsDateAndAuthorStyle = {
    color: "#999999",
    fontSize: 12,
    paddingLeft:10,
    paddingRight:10,
};

const tipsDateStyle ={
    paddingLeft: 0,
};

const tipsRecommendStyle ={
    color: "#545c63",
    fontSize: 16,
};

const rightStyle = {
    float: "right",
    width: 200,
    height: 100,
};